<script setup lang='ts'>
import { ref, reactive, onBeforeUnmount, onUnmounted, onMounted, nextTick } from 'vue'
import {  useRouter } from 'vue-router'
import { SafetyWarningService, GetMostAlarmsDevice } from '@/api/home'
import setUpTime from '@/utils/setUpTime'

// 定义变量
const statusData = ref([
  {
    machineName: 'RZG_2_S2',
    device: '尾车前部左',
    num: 24868
  },
  {
    machineName: 'RZG_2_R6',
    device: '臂悬回转减速机2号检测器',
    num: 881
  },
  {
    machineName: 'RZG_2_R8',
    device: '臂悬回转减速机2号检测器',
    num: 752
  },
  {
    machineName: 'RZG_2_KS_5号',
    device: '臂悬回转减速机2号检测器',
    num: 623
  },
  {
    machineName: 'RZG_2_KS_5号',
    device: '臂悬回转减速机2号检测器',
    num: 134
  }
])
const infoData = ref([
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  },
  {
    posi: 'RZG_2_R5_Y2L-臂架前端回转电机',
    type: '结构应力',
    grade: '二级报警',
    time: '2023-11-15 15:23:45'
  }
])
const router = useRouter()
// 报警信息列表
const warnList:any = ref([])

const wringType = [
  {
    type: 1,
    value: '一氧化碳'
  },
  {
    type: 2,
    value: '甲烷'
  },
  {
    type: 3,
    value: '粉尘'
  },
  {
    type: 4,
    value: '烟感'
  },
  {
    type: 5,
    value: '风速'
  },
  {
    type: 6,
    value: '风压'
  },
  {
    type: 7,
    value: '设备振动'
  },
  {
    type: 8,
    value: '设备温度'
  },
  {
    type: 9,
    value: '结构振动'
  },
  {
    type: 10,
    value: '结构应力'
  }
]

const warnMaximumList:any = ref([])

//定时器初始化
let timer: any = ref(null)
//ref绑定初始化
let roll: any = ref(null)

// 定义函数

onMounted(() => {
  // 获取报警信息列表
  getWarnListData()
  // 获取报警最多信息列表
  getWarnMaximumListData()
  nextTick(() => {
    //启动定时器
    start()
  })
})
// 获取报警信息列表
const getWarnListData = async () => {
  let res = await SafetyWarningService({
    IsAck: false,
    MaxResultCount: 10,
    Sorting: 'creationTime desc'
  })
  if (res.success === true) {
    warnList.value = res.result.items
    warnList.value.filter((item:any) => {
      item.time = setUpTime.formatTime(item.creationTime)
      for (let i = 0; i < wringType.length; i++) {
        if (item.type === wringType[i].type) {
          item.typeName = wringType[i].value
        }
      }
    })
  }
}
// 获取报警最多信息列表
const getWarnMaximumListData = async () => {
  let params = {
    MaxResultCount: 5,
    Sorting: 'numberOfAlarms desc'
  }
  const res = await GetMostAlarmsDevice(params)
  warnMaximumList.value = res.result.items
}

// 鼠标移入事件
const mouseEnter = () => {
  clearTimeout(timer.value)
}

// 鼠标移出事件
const mouseLeave = () => {
  start()
}

//开启定时器方法
const start = () => {
  //清除定时器
  clearTimeout(timer.value)
  //定时器触发周期
  let speed = ref(40)
  timer.value = setInterval(MarqueeTest, speed.value)
}

// 滚动效果
const MarqueeTest = () => {
  let test1 = roll.value
  //判断组件是否渲染完成
  if (test1.offsetHeight === 0) {
    test1 = roll.value
  } else {
    //如果列表数量过少不进行滚动
    if (test1.childNodes.length < 6) {
      clearTimeout(timer.value)
      return
    }
    //组件进行滚动
    test1.scrollTop += 1
    //判断滚动条是否滚动到底部
    if (test1.scrollTop === (test1.scrollHeight - test1.clientHeight)) {
      //获取组件第一个节点
      let a = test1.childNodes[0]
      //删除节点
      test1.removeChild(a)
      //将该节点拼接到组件最后
      test1.append(a)
    }
  }
}

// 跳转到诊断详情页
const goToDiagnosisDetail = () => {
  localStorage.activeName = 'warningMax'
  router.push('/menu/riZhaoPort/shiJiuPort/diagnosisDetail')
}

// 下载报表
const downloadFlie = (bar:any) => {
  console.log('bar', bar)
  const time = setUpTime.trlTime(30)
  let param = {
    BarWheelMachineCode: bar.barWheelMachineCode, //堆取料机编号
    DeviceCode: bar.deviceCode, // 设备编号
    MeasurePointCode: bar.measurePointCode, //测点编号
    MinCreationTime: time[0], //最小采集时间
    MaxCreationTime: time[1], //最大采集时间
    DownloadType: '报告'
  }
  let routeUrl = router.resolve({
    path: '/DownloadCenter',
    query: param
  })
  console.log(routeUrl.href)
  window.open(routeUrl.href, '_blank')
}

onBeforeUnmount(() => {
  //清除定时器
  clearTimeout(timer.value)
})

</script>

<template>
  <div class="rightt-list-main-box">
    <div class="warn-info-box">
      <div class="title-box">
        报警信息
      </div>
      <div class="info-box">
        <div class="title-box">
          <div class="position-box">
            位置
          </div>
          <div class="type-box">
            故障类型
          </div>
          <div class="grade-box">
            故障等级
          </div>
          <div class="time-box">
            报警时间
          </div>
        </div>
        <div
          ref="roll"
          class="info-item-box"
          @mousemove="mouseEnter"
          @mouseleave="mouseLeave"
        >
          <div
            v-for="(item, index) in warnList"
            :key="index"
            class="info-item"
          >
            <div class="position-box">
              <div style="width: 75%;">
                {{ item.measurePointCode + '-' + item.posDescription }}
              </div>
            </div>
            <div class="type-box">
              <div>{{ item.typeName }}</div>
            </div>
            <div class="grade-box">
              <div>{{ item.warningLevel === 1 ? '一级报警' : item.warningLevel === 2 ? '二级报警' : '正常' }}</div>
            </div>
            <div class="time-box">
              <div>{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="warn-maximum-box">
      <div
        class="title-box"
        @click="goToDiagnosisDetail"
      >
        报警最多
      </div>
      <div class="info-box">
        <div>
          <div class="machine-name">
            堆取料机
          </div>
          <div class="device-name">
            设备
          </div>
          <div class="num-box">
            数量
          </div>
          <div class="report-box">
            分析报告
          </div>
        </div>
        <div
          v-for="(item,index) in warnMaximumList"
          :key="index"
          class="info-item"
        >
          <div class="machine-name">
            <div style="width: 75%;">
              {{ item.barWheelMachineName }}
            </div>
          </div>
          <div class="device-name">
            <div>{{ item.deviceName }}</div>
          </div>
          <div class="num-box">
            {{ item.numberOfAlarms }}
          </div>
          <div
            class="report-box"
            @click="downloadFlie(item)"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.rightt-list-main-box {
  width: 100%;
  height: 100%;

  >div {
    margin-top: 8px;
    background-image: url("../../../assets/imgs/border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .warn-info-box {
    width: 100%;
    height: 47%;
    padding: 0 12px;

    .title-box {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      color: #fff;
    }

    .info-box {
      width: 100%;
      height: calc(100% - 40px);
      color: #fff;

      /* border: 1px solid red; */

      .title-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 30px;
        margin-top: 2px;
        font-size: 14px;
        background-image: url("../../../assets/imgs/bg.jpg");
        border-bottom: 1px solid #68d8fe;

        >div {
          display: flex;
          justify-content: center;

          /* border: 1px solid yellow; */
        }

        .position-box {
          width: 33%;
        }

        .type-box {
          width: 18%;
        }

        .grade-box {
          width: 18%;
        }

        .time-box {
          width: 30%;
        }
      }

      .info-item-box {
        width: 100%;
        height: 70%;
        padding-left: 5px;
        overflow: hidden;

        /* border: 1px solid red; */

        >div {
          display: flex;
          justify-content: center;

          /* border: 1px solid red; */
        }

        .position-box {
          width: 32%;
        }

        .type-box {
          width: 18%;
        }

        .grade-box {
          width: 18%;
        }

        .time-box {
          width: 30%;
        }

        .info-item {
          display: flex;
          align-items: center;
          height: 30px;
          margin-top: 2px;
          background-image: url("../../../assets/imgs/bg.jpg");
          border-bottom: 1px solid #68d8fe;

          >div {
            display: flex;
            justify-content: center;

            /* border: 1px solid red; */

            >div {
              overflow: hidden;
              font-size: 14px;
              white-space: nowrap;
              text-overflow: ellipsis;

              /* border: 1px solid green; */
            }
          }
        }
      }
    }
  }

  .warn-maximum-box {
    width: 100%;
    height: 50%;
    color: #fff;

    .title-box {
      display: flex;
      align-items: center;
      width: 90%;
      height: 40px;
      margin-left: 15px;

      &:hover {
        cursor: pointer;
      }
    }

    .info-box {
      width: 100%;
      height: calc(100% - 40px);
      padding: 0 20px;

      /* border: 1px solid red; */

      >div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 30px;
        margin-top: 2px;
        background-image: url("../../../assets/imgs/bg.jpg");
        border-bottom: 1px solid #68d8fe;

        >div {
          display: flex;
          justify-content: center;

          /* border: 1px solid red; */
        }

        .machine-name {
          width: 27%;
        }

        .device-name {
          width: 34%;
        }

        .num-box {
          width: 19%;
        }

        .report-box {
          width: 19%;
        }
      }

      .info-item {
        >div {
          >div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .report-box {
          height: 23px;
          background-image: url("../../../assets/imgs/download.png");
          background-repeat: no-repeat;
          background-position: 50% 0;
          background-size: 25% 100%;

          &:hover {
            cursor: pointer;
          }

          /* border: 1px solid red; */
        }
      }
    }
  }
}
</style>